.chat-nav {
    padding: 5px 5px 0px 5px;
    height: 100%;
    display: flex;
    justify-content: center;
    background-color: #34495e;
}

.chat-nav .nav-button {
    display: inline-block;
    padding: 10px 20px;
    cursor: pointer;
    font-size: smaller;
    transition: .25s;
    border-radius: 10% 10% 0% 0%;
    margin-bottom: 0px;
    width: auto;
    display: grid;
    overflow: hidden;
}

.chat-nav .nav-button a {
    height: calc(100% - 6px - 4px);
    width: calc(60px - 6px - 4px);
    max-height: 40px;
    min-height: 25px;
    padding: 0px 10px;
    display: inline-block;
    margin-top: 5px;
    grid-column: 1;
    grid-row: 1/1;
}

.webChat-nav-button-badge {
    display: block;
    padding: 0.1em 0.45em;
    background-color: red;
    color: #ecf0f1;
    align-self: flex-start;
    justify-self: self-end;
    font-size: 75%;
    border-radius: 35%;
    grid-column: 1;
    grid-row: 1/1;
    transition: .35s;
}

.chat-nav .nav-button:hover {
    background-color: #353b48;
}

.chat-nav .nav-button-selected {
    background-color: #2f3640;
}

.chat-nav .nav-button div {
    display: none;
}

.chat-nav .nav-button-selected div {
    display: block;
    background-color: white;
    width: 10px;
    height: 10px;
    grid-row: 1/1;
    grid-column: 1;
    align-self: flex-end;
    justify-self: center;
    margin: -15px;
    transform: rotate(45deg);
}

.icon-chat {
    background: url('/Css/Images/chat.png') no-repeat center center;
    background-size: contain;
}

.icon-user {
    background: url('/Css/Images/user.png') no-repeat center center;
    background-size: contain;
}

.icon-cloudFile {
    background: url('/Css/Images/cloudFile.png') no-repeat center center;
    background-size: contain;
}